﻿@page "/selectbar"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    SelectBar
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>SelectBar</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of SelectBar
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>SelectBar</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarBindValue">
    <SelectBarBindValue />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of SelectBar using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarChangeEvent">
    <SelectBarChangeEvent />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Multiple selection
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarMultiple">
    <SelectBarMultiple />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Populate SelectBar items from data
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarItemsFromData">
    <SelectBarItemsFromData />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Statically declared and populated SelectBar items from data
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarDeclaredAndItemsFromData">
    <SelectBarDeclaredAndItemsFromData />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Populate items programmatically and disable item
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarForEach">
    <SelectBarForEach />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar with icons
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarIcons">
    <SelectBarIcons />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar with images
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarImages">
    <SelectBarImages />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar with template
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarTemplate">
    <SelectBarTemplate />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar Size
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarSize">
    <SelectBarSize />
</RadzenExample>